<template>
  <div class="power_list">
    <div class="pageName">权限设置</div>
    <div class="storeInfo">
      <span class="storeName">店铺名称:</span>
      <span class="store">{{store_name}}</span>
    </div>
    <div class="power_list_col">
      <div class="column_box" ref="col1">
        <!--  -->
        <power-list title="haha" :main.sync="col1"></power-list>
      </div>
      <div class="column_box" ref="col2">
        <!--  -->
        <power-list title="haha" :main.sync="col2"></power-list>
      </div>
    </div>
    <div class="btn_box">
      <el-button type="primary" @click="submit">提交</el-button>
      <!-- <el-button type="primary">更新权限</el-button> -->
    </div>
  </div>
</template>
<script>
import powerList from "@/components/home/power-list.vue";
export default {
  data() {
    return {
      mainDataList: [],
      current: {
        parent: "",
        childs: []
      },
      col1: [],
      col2: [],
      store_id: "",
      depart_id: "",
      store_name: "",
      store_permission: []
    };
  },
  beforeRouteEnter(to, from, next) {
    if (to.query.id) {
      next();
    } else {
      next(from.fullPath);
    }
  },
  components: { powerList },
  methods: {
    // 数据修改
    checkData(arr) {
      arr.map(value => {
        if (value.child) {
          value.child.map(val => {
            if (value.checkedChild.indexOf(val.pId) != -1) {
              val.is_choose = true;
            }
            this.checkData(value.child);
          });
        }
      });
      return arr;
    },
    // 将数据由true/false 转换成0/1
    changeData(arr) {
      arr.map(value => {
        if (value.is_choose) {
          value.is_choose = 1;
        } else {
          value.is_choose = 0;
        }
        if (value.child) {
          this.changeData(value.child);
        }
      });
      return arr;
    },
    // 将除了第一级的is_choose都变为false
    changeFalse(arr) {
      arr.map(value => {
        if (value.fId != "0") {
          value.is_choose = false;
        }
        if (value.child) {
          this.changeFalse(value.child);
        }
      });
      return arr;
    },
    // 提交
    submit() {
      let store_id, permission;
      store_id = this.store_id;
      permission = JSON.parse(JSON.stringify(this.col1.concat(this.col2)));
      let permissions = this.changeData(
        this.checkData(this.changeFalse(permission))
      );
      this.$http
        .post("/admin/auth/index.php?act=storesPermission&op=savePermission", {
          store_id,
          permissions
        })
        .then(res => {
          if (res.code === 1) {
            this.$message({
              message: res.msg,
              type: "success"
            });
            setTimeout(() => {
              this.$router.push({
                path: "/home/operate-panel/permission/store-permission",
                replace: true
              });
            }, 1000);
          } else {
            this.$message({
              message: res.msg,
              type: "warning"
            });
          }
        });
    },
    /* 瀑布分配数据 */
    mountMenu(arg) {
      var temp = this.mainDataList;
      var index = arg || 0;
      var refName = this.selectCol();
      if (temp.length > index) {
        this[refName].push(this.mainDataList[index]);
        this.$nextTick(() => {
          this.mountMenu(index + 1);
        });
      }
    },
    /* 获取高度比较低的数组 */
    selectCol() {
      var getHeight = ref => {
        return this.$refs[ref].offsetHeight;
      };
      var height1 = getHeight("col1");
      var height2 = getHeight("col2");
      switch (Math.min(height1, height2)) {
        case height1 == height2:
          return "col1";
          break;
        case height1:
          return "col1";
          break;
        case height2:
          return "col2";
          break;
      }
    },
    /* 获取全部列表 */
    getDataFn() {
      /*display=0  无有效子元素 pSet=0 不展示 */
      return this.$http
        .post("/admin/auth/index.php?act=storesPermission&op=storePermission", {
          store_id: this.store_id
        })
        .then(r => {
          if (r.code === 1) {
            this.mainDataList = r.data;
            this.mapData(this.mainDataList, false);
            this.mountMenu();
          }
          return r;
        });
    },
    // 初始化is_choose
    mapData(arr, parentDisabled = false) {
      arr.map((value) => {
        if (
          parentDisabled || 
          parseInt(value.fId) === 0 && (
            +this.depart_id === 600 && +value.pId === 4 || 
            +this.depart_id !== 600 && +value.pId === 3
          )
        ) {
          value.is_choose = 0
          value.disabled = true
          console.log(value, 'value')
        }
        if (value.is_choose == 1) {
          value.is_choose = true;
        } else {
          value.is_choose = false;
        }
        if (value.child) {
          value.checkedChild = [];
          value.child.map(val => {
            if (val.is_choose == 1 && value.is_choose) {
              value.checkedChild.push(val.pId);
            }
          });
          this.mapData(value.child, value.disabled);
        }
      });
    }
  },
  mounted() {
    /* 当前页面store_id */
    this.store_id = this.$route.query.id;
    this.store_name = this.$route.query.name;
    this.depart_id = this.$route.query.depart_id
    /* 获取全部列表 */
    this.getDataFn();
  }
};
</script>
<style lang="scss" scoped>
.pageName {
  color: #099acf;
  /* padding: 15px; */
  padding-bottom: 15px;
  line-height: 30px;
  font-size: 16px;
}
.storeInfo {
  border: 1px solid #e2e2e2;
  border-width: 1px 0 1px 0;
  line-height: 60px;
  font-size: 14px;
  .storeName {
    width: calc(100%-30px);
    margin: 0 auto;
    color: #099acf;
  }
  // .store {
  // }
}

// .power_list {
//   /* padding-top: 20px; */
// }
.power_list_col {
  width: 90%;
  margin-top: 20px;
}
.column_box {
  display: inline-block;
  width: 48%;
  vertical-align: top;
}
.btn_box {
  padding-top: 10px;
  border-top: 1px solid #e2e2e2;
}
</style>